<template>
  <div class="detail">
    <div class="back" @click="goBack">fanhui</div>
    <PubVideo :id="'video1'" :config="videoConfig" />
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
import PubVideo from '@/components/pub-video/index'

export default {
  name: 'Detail',
  components: {
    PubVideo
  },
  setup() {
    const route = useRoute()
    const state = reactive({
      videoConfig: {},
      videoDetailId: route.query.from || '1',
      pageData: {}
    })

    const getVideoDetail = () => {
      return {
        code: 200,
        data: {
          poster: '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
          link: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
        }
      }
    }

    const router = useRouter()
    const goBack = () => {
      Toast.clear()
      Toast(`无操作权限\n请前往 ‘我的’ 充值开通会员`)
      router.go(0)
    }

    onMounted(async () => {
      const { data } = await getVideoDetail()
      if (!data) {
        state.pageData = {}
        return
      }
      state.pageData = { ...data }
      state.videoConfig.video = data.link
      state.videoConfig.poster = data.poster
    })

    return {
      ...toRefs(state),
      goBack
    }
  }
}
</script>

<style lang="scss" scoped>
.back {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  z-index: 1;
}
</style>